<template>
    <n-scrollbar class="tab-scroller">
        <div class="quick-start-bar">
            参考配置：
            <n-space style="gap: 0 4px">
                <com_modal_QS_local />
                <com_modal_QS_anony />
            </n-space>
        </div>
        <n-code
            v-if="!compControl.edit_control.edit_mode"
            :code="display_text"
            language="shell"
            show-line-numbers />
        <n-input
            v-else
            autosize
            class="tab-scroller"
            v-model:value="display_text"
            type="textarea"
            placeholder="基本的 Textarea" />
    </n-scrollbar>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useDialog, useMessage, type DialogReactive } from 'naive-ui'
import { EditNoteRound, SaveAsOutlined, DeleteSweepOutlined, AutorenewFilled } from '@vicons/material'
import type { AxiosResponse } from 'axios'
import { axg_getConfigFile, axp_editConfigFile } from './conf-interface'
import com_modal_QS_local from './com-modal-QS_local.vue'
import com_modal_QS_anony from './com-modal-QS_anony.vue'

const route = useRoute()
const dialog = useDialog()
const message = useMessage()

const display_text = ref('')
const display_text_backup = ref('')

const compControl = reactive({
    edit_control: {
        edit_mode: false,
        computed_edited: computed<boolean>((): boolean => {
            return Boolean(display_text.value != display_text_backup.value)
        }),
        handleStartEdit() {
            compControl.edit_control.edit_mode = true
        },
        async handleEndEdit(save: boolean = false): Promise<boolean> {
            if (save) {
                const response: AxiosResponse = await axp_editConfigFile(
                    'vsftpd.conf',
                    display_text.value
                )
                if (response.status == 200) {
                    display_text_backup.value = display_text.value
                    compControl.edit_control.edit_mode = false
                    message.success('保存成功')
                    return true
                } else {
                    message.error('保存失败')
                    return false
                }
            } else {
                if (display_text_backup.value != display_text.value) {
                    return new Promise((resolve) => {
                        dialog.warning({
                            title: '警告',
                            content: '当前编辑的内容未保存，是否确认离开？',
                            positiveText: '离开',
                            negativeText: '取消',
                            onPositiveClick: () => {
                                display_text.value = display_text_backup.value
                                compControl.edit_control.edit_mode = false
                                resolve(true) // 用户选择离开，返回 true
                            },
                            onNegativeClick: () => {
                                resolve(false) // 用户选择取消，返回 false
                            }
                        })
                    })
                } else {
                    compControl.edit_control.edit_mode = false
                    return true
                }
            }
        }
    }
})

async function handleGetText() {
    const response = await axg_getConfigFile('vsftpd.conf')
    display_text.value = response
    display_text_backup.value = response
}
defineExpose({
    refreshData: handleGetText,
    startEdit: compControl.edit_control.handleStartEdit,
    endEdit: compControl.edit_control.handleEndEdit
})

onMounted(() => {
    handleGetText()
})
</script>

<style lang="scss" scoped>
@use '@/components/framework/framework';

:deep(.tab-scroller) {
    $height: calc(framework.$framework_content_height - 42px - 1em);
    max-height: $height;
}
:deep(.n-tab-pane) {
    padding: 0.25rem 0 !important;
    //height: 300px;
}
:deep(.n-code__line-numbers) {
    background-color: #00a0000a;
    padding-right: 0.5rem;
}
:deep(.__code__) {
    border-radius: 0.375rem;
    width: 100%;
    padding: 0 0.5rem;
    background-color: #00000007;
}
.quick-start-bar {
    display: flex;
    align-items: center;
    background-color: #7fffd450;
    padding: 1px 0.5rem 2px 0.5rem;
}
</style>
